<template>
  <div class="one">
    <form @submit.prevent="onSubmit">
      <div class="form-group">
        <label for="exampleInputPassword1">账号(长度为非空字符串 6 ~ 8 )</label>
        <input
          type="text"
          class="form-control"
          placeholder="请输入账号名"
          :value="formObject.account"
          @change="handlerAcc"
        />
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">密码( 长度为非空字符串 3 ~ 4)</label>
        <input
          type="password"
          class="form-control"
          placeholder="请输入密码"
          :value="formObject.password"
          @change="handlerPwd"
        />
      </div>
      <br />
      <button type="submit" class="btn btn-primary w-25" @click="tijiao($event)">
        提交
      </button>
      <button type="reset" class="btn btn-danger w-25" @click="chongzhi($event)">
        重置
      </button>
    </form>
  </div>
</template>

<script>
/*
作业：
使用 vue3 完成如下需求:
1) 定制一个表单，其中有 账号和密码，初始值为 账号:admin 密码: admin
2) 点击 “提交按钮” 之后 验证 账号: 长度为 6 ~ 8  密码: 3 ~ 4  验证通过 提示”成功”消息， 验证没通过 提示“失败”消息， 并清空账号与密码填写的信息
3) 表单使用 bootstrap 样式。
*/
import { ref } from "vue";
export default {
  setup() {
    const formObject = ref({
      account: "admin",
      password: "admin",
    });

    // 正则判断条件
    let accRef = /\w{6,8}/;
    let passRef = /\w{3,4}/;

    // 正则判断数据
    let acc = ref(formObject.value.account);
    let pass = ref(formObject.value.password);

    // 表单控件发生变化
    const handlerAcc = (e) => {
      acc.value = formObject.value.account = e.target.value;
    };
    const handlerPwd = (e) => {
      pass.value = formObject.value.password = e.target.value;
    };

    // 提交
    let tijiao = () => {
      if (accRef.test(acc.value) && passRef.test(pass.value)) console.log("验证成功");
      else console.log("验证失败");
      console.log(
        "账号为=>",
        formObject.value.account,
        "密码为=>",
        formObject.value.password
      );

      formObject.value.account = "";
      formObject.value.password = "";
    };

    // 重置
    let chongzhi = () => {
      formObject.value.account = "";
      formObject.value.password = "";
    };
    return { formObject, handlerAcc, handlerPwd, tijiao, chongzhi };
  },
};
</script>

<style>
.one {
  width: 500px;
  margin: 100px auto;
}
</style>
